<template>
	<view class="container">
		<view class="roomName">{{ name }}</view>
		<view class="formBox">
			<uni-forms ref="form" :modelValue="FormData" :rules="rules">
				<view class="box">
					<view class="top">
						<view class="formTitle">入住人信息</view>
						<view class="switch">
							<text>签订电子合同</text>
							<switch :checked="web" @change="webChange" style="transform: scale(0.8)" color="#2979ff" />
						</view>
					</view>
					<uni-forms-item required label="姓名" :name="['customer', 0, 'customer_name']" :rules="[{ required: true, errorMessage: '请填写姓名' }]">
						<uni-easyinput type="text" v-model="FormData.customer[0].customer_name" :clearable="false" placeholder="请输入名字" />
					</uni-forms-item>
					<uni-forms-item
						required
						label="手机号"
						:name="['customer', 0, 'customer_mobile']"
						:rules="[
							{ required: true, errorMessage: '请填写手机号' },
							{
								pattern: '^1[3-9]\\d{9}$',
								errorMessage: '请填写正确的手机号'
							}
						]"
					>
						<uni-easyinput type="number" v-model="FormData.customer[0].customer_mobile" :clearable="false" placeholder="请输入手机号" />
					</uni-forms-item>
					<uni-forms-item
						required
						label="证件号"
						:name="['customer', 0, 'customer_idcard']"
						v-if="web"
						:rules="[
							{ required: true, errorMessage: '请填写身份证号' },
							{
								pattern: '^[1-9]\\d{5}(18|19|([23]\\d))\\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\\d{3}[0-9Xx]$',
								errorMessage: '请填写正确的身份证号'
							}
						]"
					>
						<uni-easyinput type="idcard" v-model="FormData.customer[0].customer_idcard" :clearable="false" placeholder="请输入身份证号" />
					</uni-forms-item>
					<uni-forms-item label="证件号" v-else>
						<uni-easyinput type="idcard" v-model="FormData.customer[0].customer_idcard" :clearable="false" placeholder="请输入身份证号" />
					</uni-forms-item>
					<uni-forms-item label="同住人">
						<view class="picker-input" @click="addTogether">
							{{ togetherNum }}
							<uni-icons type="right" size="16" color="#bbb"></uni-icons>
						</view>
					</uni-forms-item>
					<uni-forms-item label="备注" name="rent_remark">
						<uni-easyinput type="textarea" v-model="FormData.rent_remark" placeholder="请填写备注信息" />
					</uni-forms-item>
				</view>
				<view class="box">
					<view class="formTitle" v-if="web">合同信息</view>
					<view class="formTitle" v-else>入住周期</view>
					<uni-data-checkbox mode="tag" v-model="timeRanges" :localdata="timeList" @change="rangeChange"></uni-data-checkbox>
					<uni-forms-item required label="开始时间" name="start_date">
						<picker mode="date" @change="bindTimeStart" :value="FormData.start_date">
							<view class="picker-input">
								{{ FormData.start_date }}
								<uni-icons type="right" size="16" color="#bbb"></uni-icons>
							</view>
						</picker>
					</uni-forms-item>
					<uni-forms-item required label="结束时间" name="end_date">
						<picker mode="date" @change="bindTimeEnd" :value="FormData.end_date" :start="FormData.start_date">
							<view class="picker-input">
								{{ FormData.end_date }}
								<uni-icons type="right" size="16" color="#bbb"></uni-icons>
							</view>
						</picker>
					</uni-forms-item>
					<block v-if="web">
						<uni-forms-item required label="出租方式" name="pay_type">
							<picker @change="payTypeChange" :value="FormData.pay_type" :range="paytype" range-key="label">
								<view class="picker-input">
									{{ FormData.pay_type_name }}
									<uni-icons type="right" size="16" color="#bbb"></uni-icons>
								</view>
							</picker>
						</uni-forms-item>
						<uni-forms-item required label="租金" name="pay_money">
							<uni-easyinput type="digit" v-model="FormData.pay_money" :clearable="false" placeholder="请输入" />
						</uni-forms-item>
						<uni-forms-item required label="押金" name="rent_deposit">
							<uni-easyinput type="digit" v-model="FormData.rent_deposit" :clearable="false" placeholder="请输入" />
						</uni-forms-item>
						<uni-forms-item required label="居住人数" name="people_number">
							<uni-easyinput type="number" v-model="FormData.people_number" :clearable="false" placeholder="请输入" />
						</uni-forms-item>
						<uni-forms-item required label="面积" name="rent_area">
							<uni-easyinput type="number" v-model="FormData.rent_area" :clearable="false" placeholder="请输入" />
						</uni-forms-item>
						<uni-forms-item required label="支付时间" name="pay_days" v-if="FormData.pay_type == 'month'">
							<picker @change="bindDayChange" :value="form.pay_days" :range="monthway" range-key="label">
								<view class="picker-input">
									<text v-if="FormData.pay_days == 0">一次性</text>
									<text v-else-if="FormData.pay_days == 12">每1年</text>
									<text v-else>每{{ FormData.pay_days }}月</text>
									<uni-icons type="right" size="16" color="#bbb"></uni-icons>
								</view>
							</picker>
						</uni-forms-item>
						<uni-forms-item required label="支付时间" name="pay_days" v-else-if="FormData.pay_type == 'day'">
							<picker @change="bindDayChange" :range="dayway">
								<view class="picker-input">
									<text v-if="FormData.pay_days == 0">一次性</text>
									<text v-else>每{{ FormData.pay_days }}天</text>

									<uni-icons type="right" size="16" color="#bbb"></uni-icons>
								</view>
							</picker>
						</uni-forms-item>
						<uni-forms-item required label="用途" name="used_type">
							<picker @change="usedTypeChange" :range="usedtype">
								<view class="picker-input">
									{{ FormData.used_type }}
									<uni-icons type="right" size="16" color="#bbb"></uni-icons>
								</view>
							</picker>
						</uni-forms-item>
						<uni-forms-item label="房间物品" name="deviceOther">
							<uni-easyinput type="textarea" v-model="FormData.deviceOther" placeholder="请填写房间物品信息" />
						</uni-forms-item>
						<uni-forms-item label="其他约定" name="contract_other">
							<uni-easyinput type="textarea" v-model="FormData.contract_other" placeholder="请填写其他约定信息" />
						</uni-forms-item>
					</block>
				</view>
				<view class="box billTitle">
					<view class="top">
						<view class="formTitle">账单</view>
						<view class="btns">
							<view class="btn" @click="addBill">+添加记账</view>
							<view class="btn" @click="addIncomeBill">+添加待收账单</view>
						</view>
					</view>
				</view>
				<view class="empty" v-if="FormData.bill.length < 1">
					<view class="emptyWord">暂无账单</view>
				</view>
				<view class="list" v-else>
					<view class="bill" v-for="(item, index) in FormData.bill" :key="index">
						<view class="head">
							<view class="name">{{ item.bill_title }}</view>
							<view class="del" @click="delBill(index)">
								<uni-icons type="minus" size="24" color="#e43d33"></uni-icons>
							</view>
						</view>
						<view class="bot">
							<view class="money income" v-if="item.bill_type == 'income'">{{ Number(item.bill_money).toFixed(2) }}元</view>
							<view class="money payed" v-else-if="item.bill_type == 'payed'">-{{ Number(item.bill_money).toFixed(2) }}元</view>
							<view class="date">{{ item.bill_date }}</view>
						</view>
					</view>
				</view>
				<view class="btns">
					<button class="btn" type="primary" @click="submit">确 定</button>
				</view>
			</uni-forms>
		</view>
	</view>
</template>

<script>
import api from '@/api/api';
export default {
	data() {
		return {
			sn: '',
			name: '',
			web: false,
			timeRanges: null,
			togetherNum: '',
			FormData: {
				room_id: '',
				start_date: '',
				end_date: '',
				rent_remark: '',
				customer_list: '',
				bill_list: '',
				customer: [
					{
						customer_type: 1,
						customer_mobile: '',
						customer_name: '',
						customer_idcard: ''
					}
				],
				bill: [],
				// 合同
				pay_type: 'month',
				pay_type_name: '月租',
				pay_money: '',
				pay_days: 1,
				rent_area: '',
				rent_deposit: '',
				people_number: '',
				used_type: '居住',
				contract_other: '',
				deviceOther: '',
				customer_id: '',
				rent_sn: ''
			},
			rules: {
				start_date: {
					rules: [
						{
							required: true,
							errorMessage: '请选择开始日期'
						}
					]
				},
				end_date: {
					rules: [
						{
							required: true,
							errorMessage: '请选择结束日期'
						}
					]
				},
				pay_money: {
					rules: [
						{
							required: true,
							errorMessage: '请输入租金'
						}
					]
				},
				rent_deposit: {
					rules: [
						{
							required: true,
							errorMessage: '请输入押金'
						}
					]
				},
				people_number: {
					rules: [
						{
							required: true,
							errorMessage: '请输入居住人数'
						}
					]
				},
				rent_area: {
					rules: [
						{
							required: true,
							errorMessage: '请输入面积'
						}
					]
				}
			},
			monthway: [
				{
					value: 1,
					label: '每1月'
				},
				{
					value: 2,
					label: '每2月'
				},
				{
					value: 3,
					label: '每3月'
				},
				{
					value: 4,
					label: '每4月'
				},
				{
					value: 6,
					label: '每6月'
				},
				{
					value: 12,
					label: '每1年'
				},
				{
					value: 0,
					label: '一次性'
				}
			],
			dayway: ['一次性'],
			usedtype: ['居住', '商业'],
			paytype: [
				{
					value: 'month',
					label: '月租'
				},
				{
					value: 'day',
					label: '日租'
				}
			],
			timeList: [
				{
					text: '1月',
					value: 1
				},
				{
					text: '3月',
					value: 3
				},
				{
					text: '6月',
					value: 6
				},
				{
					text: '1年',
					value: 12
				}
			]
		};
	},
	onLoad(e) {
		this.FormData.room_id = e.id;
		this.name = e.name;
		this.FormData.start_date = this.dayjs().format('YYYY-MM-DD');
		for (let i = 0; i < 31; i++) {
			this.dayway.push('每' + Number(i + 1) + '天');
		}
		if (e.mobile) {
			this.FormData.customer[0].customer_name = e.name;
			this.FormData.customer[0].customer_mobile = e.mobile;
			this.FormData.customer[0].customer_idcard = e.idcard;
			this.FormData.start_date = e.start;
			this.FormData.end_date = e.end;
			this.sn = e.sn;
		}
	},
	methods: {
		webChange(e) {
			this.web = e.detail.value;
			this.$refs.form.clearValidate();
		},
		rangeChange(e) {
			this.FormData.end_date = this.dayjs(this.FormData.start_date).add(e.detail.value, 'M').subtract(1, 'd').format('YYYY-MM-DD');
		},
		bindTimeStart(e) {
			this.FormData.start_date = e.detail.value;
			this.timeRanges = null;
		},
		bindTimeEnd(e) {
			this.FormData.end_date = e.detail.value;
			this.timeRanges = null;
		},
		payTypeChange(e) {
			this.FormData.pay_type = this.paytype[e.detail.value].value;
			this.FormData.pay_type_name = this.paytype[e.detail.value].label;
			if (this.FormData.pay_type == 'month') {
				this.FormData.pay_days = 1;
			} else if (this.FormData.pay_type == 'day') {
				this.FormData.pay_days = 0;
			}
		},
		bindDayChange(e) {
			if (this.FormData.pay_type == 'day') {
				this.FormData.pay_days = e.detail.value;
			} else if (this.FormData.pay_type == 'month') {
				this.FormData.pay_days = this.monthway[e.detail.value].value;
			}
		},
		usedTypeChange(e) {
			this.FormData.used_type = this.usedtype[e.detail.value];
		},
		addTogether() {
			uni.navigateTo({
				url: '/pages/add/rentTogether?data=' + JSON.stringify(this.FormData.customer)
			});
		},
		togetherUpdate(obj) {
			this.FormData.customer = obj;
			if (this.FormData.customer.length > 1) {
				this.togetherNum = this.FormData.customer.length - 1 + '人';
			} else {
				this.togetherNum = '';
			}
		},
		addBill() {
			uni.navigateTo({
				url: '/pages/add/rentBillPay'
			});
		},
		billPayUpdate(obj) {
			this.FormData.bill.push(obj);
		},
		addIncomeBill() {
			uni.navigateTo({
				url: '/pages/add/rentBillPayNot'
			});
		},
		billPayNotUpdate(arr) {
			this.FormData.bill = this.FormData.bill.concat(arr);
		},
		delBill(index) {
			this.FormData.bill.splice(index, 1);
		},
		submit() {
			this.$refs.form.validate().then((res) => {
				uni.showLoading();
				let form = Object.assign({}, this.FormData);
				let dataOne = {
					room_id: form.room_id,
					start_date: form.start_date,
					end_date: form.end_date,
					rent_remark: form.rent_remark,
					customer_list: JSON.stringify(form.customer),
					bill_list: JSON.stringify(form.bill)
				};
				if (this.sn != '') {
					// 取消预定
					api.deleteBook({ rent_sn: this.sn });
				}
				if (this.web) {
					api.rentAdd(dataOne).then((row) => {
						if (row.data.is_success) {
							// 电子合同
							let dataTwo = {
								room_id: form.room_id,
								pay_type: form.pay_type,
								pay_money: form.pay_money,
								pay_days: form.pay_days,
								rent_area: form.rent_area,
								rent_deposit: form.rent_deposit,
								people_number: form.people_number,
								used_type: form.used_type,
								contract_other: form.contract_other,
								deviceOther: form.deviceOther,
								customer_id: row.data.rent_info.customer_id,
								rent_sn: row.data.rent_info.rent_sn
							};
							api.hetongAdd(dataTwo).then((data) => {
								if (data.data.is_success) {
									uni.hideLoading();
									uni.showToast({
										title: '办理成功'
									});
									setTimeout(() => {
										uni.hideToast();
										if (this.sn != '') {
											uni.navigateBack({
												delta: 2
											});
										} else {
											uni.navigateBack();
										}
									}, 1000);
								} else {
									uni.hideLoading();
									uni.showToast({
										title: '合同添加失败',
										icon: 'none'
									});
								}
							});
						} else {
							uni.hideLoading();
							uni.showToast({
								title: '办理入住失败',
								icon: 'none'
							});
						}
					});
				} else {
					api.rentAdd(dataOne).then((row) => {
						if (row.data.is_success) {
							uni.hideLoading();
							uni.showToast({
								title: '办理成功'
							});
							setTimeout(() => {
								uni.hideToast();
								if (this.sn != '') {
									uni.navigateBack({
										delta: 2
									});
								} else {
									uni.navigateBack();
								}
							}, 1000);
						} else {
							uni.hideLoading();
							uni.showToast({
								title: '办理入住失败',
								icon: 'none'
							});
						}
					});
				}
			});
		}
	}
};
</script>

<style lang="scss">
.roomName {
	height: 90rpx;
	line-height: 90rpx;
	padding: 0 20rpx;
	font-size: 30rpx;
	font-weight: bold;
	margin-bottom: 20rpx;
	background: #fff;
}
.top {
	display: flex;
	justify-content: space-between;
	.switch {
		font-size: 26rpx;
		padding-top: 20rpx;
	}
	.btns {
		padding: 0;
		padding-top: 30rpx;
		width: auto;
		.btn {
			font-size: 26rpx;
			color: $uni-primary;
			white-space: nowrap;
			display: flex;
			align-items: center;
		}
	}
}
.formBox .box.billTitle {
	margin-bottom: 0;
	padding-bottom: 20rpx;
}
.empty {
	background: #fff;
}
.list {
	.bill {
		background: #fff;
		padding: 20rpx;
		border-bottom: 1px solid #f0f0f0;
		&:last-child {
			border-bottom: none;
		}
		.head {
			display: flex;
			justify-content: space-between;
			.name {
				font-size: 28rpx;
				font-weight: bold;
			}
		}
		.bot {
			display: flex;
			justify-content: space-between;
			font-size: 26rpx;
			color: $uni-secondary-color;
			.income {
				color: #1ecb6b;
			}
			.payed {
				color: #ee5959;
			}
		}
	}
}
</style>
